@page

@{
    Layout = "Shared/_LayoutCenter";
    ViewData["CenterNav"] = 5;
}

<div class="uk-card-default uk-position-relative p-3 rounded">
    <div class="uk-flex uk-flex-center@m my-4 bg-white " uk-sticky="media : @@s ; offset:37 ;bottom:true">
        <div class="uk-text-center uk-width-4-4@m">

            <div class="uk-child-width-1-3 uk-grid-small" uk-grid>
                <div>
                    <div>
                        <h4>Basic</h4>
                        <div class="uk-flex-inline uk-flex-middle">
                            <span class="mr-2 uk-h5">￥</span>
                            <span class="uk-heading-medium uk-text-bold">0</span>
                        </div>

                        <div class="uk-text-small mb-3">￥0</div>
                        <a href="#" class="button outline-primary block border-size-2">
                            <span>Upgrade</span>
                            <span class="uk-visible@s"> Now</span>
                        </a>
                    </div>
                </div>
                <div>
                    <div>
                        <h4>Vip</h4>
                        <div class="uk-flex-inline uk-flex-middle">
                            <span class="mr-2 uk-h5">￥</span>
                            <span class="uk-heading-medium uk-text-bold">29</span>
                        </div>

                        <div class="uk-text-small mb-3">￥50 /Per Year</div>
                        <a href="#" class="button primary block border-size-2">
                            <span>Upgrade</span>
                            <span class="uk-visible@s">Now</span>
                        </a>
                    </div>
                </div>
                <div>
                    <div>
                        <h4>SVip</h4>
                        <div class="uk-flex-inline uk-flex-middle">
                            <span class="mr-2 uk-h5">￥</span>
                            <span class="uk-heading-medium uk-text-bold">99</span>
                        </div>

                        <div class="uk-text-small mb-3">￥259/ life time</div>
                        <a href="#" class="button outline-primary block border-size-2">
                            <span>Upgrade</span>
                            <span class="uk-visible@s">Now</span>
                        </a>
                    </div>
                </div>
            </div>


        </div>

    </div>

</div>
<div class="uk-card-default rounded mt-4 p-3">
    <div class="p-3">
        <h5 class="mb-0"> 功能比较 </h5>
    </div>

    <div class="uk-overflow-auto">

        <table class="uk-table uk-table-striped">
            <tbody>
            <tr>
                <td>Featured Channal</td>
                <td>1X</td>
                <td>2X</td>
                <td>4X</td>
            </tr>
            <tr>
                <td>Video Upload</td>
                <td>1-10</td>
                <td>Unlimited*</td>
                <td>Unlimited*</td>
            </tr>
            <tr>
                <td>Disk Space</td>
                <td>10GB</td>
                <td>30GB</td>
                <td>50GB</td>
            </tr>
            <tr>
                <td>Channal Registration</td>
                <td>2</td>
                <td>3-10</td>
                <td>Unlimited*</td>
            </tr>
            <tr>
                <td>MySQL Databases</td>
                <td>1</td>
                <td>Unlimited*</td>
                <td>Unlimited*</td>
            </tr>

            <tr>
                <td>Dashboard Panel</td>
                <td>
                    <span class="icon-feather-check-circle icon-small uk-text-success"></span>
                </td>
                <td>
                    <span class="icon-feather-check-circle icon-small uk-text-success"></span>
                </td>
                <td>
                    <span class="icon-feather-check-circle icon-small uk-text-success"></span>
                </td>
            </tr>
            <tr>
                <td>Uptime Guarantee</td>
                <td>
                    <span class="icon-feather-check-circle icon-small uk-text-success"></span>
                </td>
                <td>
                    <span class="icon-feather-check-circle icon-small uk-text-success"></span>
                </td>
                <td>
                    <span class="icon-feather-check-circle icon-small uk-text-success"></span>
                </td>
            </tr>

            <tr>
                <td>Email Support</td>
                <td>
                    <span class="icon-line-awesome-close icon-small uk-text-danger"></span>
                </td>
                <td>
                    <span class="icon-feather-check-circle icon-small uk-text-success"></span>
                </td>
                <td>
                    <span class="icon-feather-check-circle icon-small uk-text-success"></span>
                </td>
            </tr>
            <tr>
                <td> Go Live </td>
                <td>
                    <span class="icon-line-awesome-close icon-small uk-text-danger"></span>
                </td>
                <td>
                    <span class="icon-line-awesome-close icon-small uk-text-danger"></span>
                </td>
                <td>
                    <span class="icon-feather-check-circle icon-small uk-text-success"></span>
                </td>
            </tr>
            </tbody>
        </table>

    </div>
</div>